<template>
  <div class="web-tab">
    <v-title title="模板类型" refresh="true"></v-title>
    <div class="bookmarks">
      <ul slot="content" class="panel-ul" @click="changeMB($event)">
        <li :class="mb=='backend'?'active':''">后台管理</li>
        <li :class="mb=='personal'?'active':''">个人网站</li>
        <li :class="mb=='smcode'?'active':''">小程序</li>
        <li :class="mb=='gzcode'?'active':''">公众号</li>
        <li :class="mb=='travel'?'active':''">旅行主页</li>
        <li :class="mb=='sells'?'active':''">电商平台</li>
      </ul>
    </div>

    <v-title title="热门标签" refresh="true"></v-title>
    <div class="bookmarks">
      <ul slot="content" class="panel-ul" @click="changeTJ($event)">
        <li :class="tj=='Vue'?'active':''">Vue</li>
        <li :class="tj=='React'?'active':''">React</li>
        <li :class="tj=='Angular'?'active':''">Angular</li>
        <li :class="tj=='Python'?'active':''">Python</li>
        <li :class="tj=='Jsp'?'active':''">Jsp</li>
        <li :class="tj=='Jquery'?'active':''">Jquery</li>
      </ul>
    </div>

    <v-title title="热门推荐"></v-title>
    <div class="bookmarks">
      <ul slot="content" class="recommand-ul">
        <li>
          <router-link to="/">
            <Icon type="ios-volume-down" color="#0e8694" size="18"/>
            梦中的婚礼
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <Icon type="ios-volume-down" color="#0e8694" size="18"/>
            天使的翅膀
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <Icon type="ios-volume-down" color="#0e8694" size="18"/>
            沙漠的绿洲
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <Icon type="ios-volume-down" color="#0e8694" size="18"/>
            泰山的石头
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <Icon type="ios-volume-down" color="#0e8694" size="18"/>
            雪山的苍松
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <Icon type="ios-volume-down" color="#0e8694" size="18"/>
            大海的珊瑚
          </router-link>
        </li>
      </ul>
    </div>

    <v-title title="关注我"></v-title>
    <div class="qt-cont">
      <img src="@/assets/user/user4-128x128.jpg" alt="二维码"/>
      <p>mail:tojustinzyh@163.com</p>
      <p>弄丢了心情，向谁借</p>
    </div>
  </div>
</template>

<script>
  import vTitle from '@/components/base/title'

  export default {
    name: 'webTab',
    components: {
      vTitle
    },
    data () {
      return {
        tj: '',
        mb: '',
        mbTransfer: {
          backend: '后台管理',
          personal: '个人网站',
          smcode: '小程序',
          gzcode: '公众号',
          travel: '旅行主页',
          sells: '电商平台'
        }
      }
    },
    methods: {
      changeTJ: function (e) {
        let t = e.target.innerText
        this.tj = t
      },
      changeMB: function (e) {
        let m = e.target.innerText
        for (let key in this.mbTransfer) {
          if (this.mbTransfer[key] === m) {
            this.mb = key
          }
        }
      },
      resetPanel: function () {
        this.tj = ''
      },
      resetTemplet: function () {
        this.mb = ''
      }
    }
  }
</script>

<style scoped lang="scss">
  .web-tab {
    background-color: #ffffff;

    .bookmarks {
      padding: 8px 12px;

      .panel-ul {
        list-style: none;
        overflow: hidden;

        li {
          padding: 5px 10px;
          color: #0A1633;
          background-color: #EAEAEA;
          display: block;
          float: left;
          margin-bottom: 8px;
          font-size: 12px;
          line-height: 20px;
          text-align: center;
          margin-right: 8px;
          cursor: default;

          &:hover {
            background-color: #0e8694;
            color: #ffffff;
          }

          &.active {
            background-color: #0e8694;
            color: #ffffff;
          }
        }
      }

      .recommand-ul {
        list-style: none;

        li {
          line-height: 22px;
          padding: 3px 0;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }

    .qt-cont {
      padding: 8px 20px 50px 8px;

      img {
        display: block;
        width: 100%;
        max-width: 130px;
        margin-bottom: 10px;
      }

      p {
        font-size: 13px;
        color: #454545;
        padding: 1px 0;
      }
    }
  }
</style>
